<template>
  <div>
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" style="margin-top: 20px" v-show="showSearch" label-width="68px">
      <el-form-item label="项目" prop="projectId">
        <el-select v-model="queryParams.projectId"   placeholder="=====请选择项目=====" clearable  @change="getData" >
          <el-option v-for="pro in projectList"  :label="pro.projectName" :value="pro.projectId"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div ref="tu" style="width: 100%;height: 800px;" ></div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
import {listProblemStatistics} from "@/api/prodata/problemStatistics";
import {listProjectByUserId} from "@/api/project/project";
export default {
  name: "problemStatistics",
  data() {
    return {
      // 显示搜索条件
      showSearch: true,
      projectId: null,
      option: null,
      myChart: null,
      //条件查询下拉框
      projectList:[],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        projectId: null,
      },
    }
  },
  mounted() {
    this.myChart = echarts.init(this.$refs.tu);
    this.option = {
      title:{
        text: '项目问题统计',
        //标题居中
        left: 'center',
        top: 'top',
        textStyle: {
          fontSize: 30,
          color:'#666',
          fontWeight: 'bold',
        },
      },
      tooltip:{
        top: 300,
        formatter: function(p){
          return p.name+'<br/>'+p.value+'个';
        },
      },
      grid:{
        top: '10%',
        left: '10%',
        right: '10%',
      },
      legend: {
        right: '10%',
        top: "20%",
        orient: 'vertical',
      },
      series:[
        {
          name: '',
          type: 'pie',
          data: [],
          label:{
            formatter: function (params) {
                return params.name+'\n'+params.percent+'%';
            },
            fontWeight: 'bold',
            position: 'outside',
            fontSize: 25,
          },
          radius: ['30%', '60%']
        }
      ]
    }
    this.getProjectList();
  },
  methods: {
    /** 查询项目下拉框 */
    getProjectList() {
      listProjectByUserId().then(response => {
        this.projectList = response.data;
        this.queryParams.projectId = this.projectList[0].projectId;
        this.getData();
      });
    },
    getData(){
      listProblemStatistics({projectId:this.queryParams.projectId})
        .then(response => {
          if(response.data.length === 0 || response.data[0].count === 0){
            this.option.series[0].data = [];
            this.option.legend.data = [];
            this.option.title.text = '暂无数据';
            this.myChart.setOption(this.option);
            this.$message.warning('当前项目暂无问题数据');
          } else {
            this.option.series[0].data = response.data.map(item => ({
              value: item.count,
              name: item.name,
            }));
            this.option.legend.data = response.data.map(item => item.name);
            this.myChart.setOption(this.option);
          }
        })
    }

  }
}
</script>

<style scoped>

</style>
